<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <div style="position: absolute; left: 18px; top: 18px">
      <button>{{ message }}</button>
    </div>
  </div>
</template>

<script>
function createEarth(comp) {
  // 1.1.1 创建地球
  var earth = new XE.Earth(comp.$refs.earthContainer);

  // 1.1.2 添加默认地球影像
  // earth.sceneTree.root = {
  //   children: [
  //     {

  //       czmObject: {
  //         name: "默认离线影像",
  //         xbsjType: "Imagery",
  //         xbsjImageryProvider: {
  //           createTileMapServiceImageryProvider: {

  //             url: XE.HTML.cesiumDir + "Assets/Textures/NaturalEarthII",
  //             fileExtension: "jpg"
  //           },
  //           type: "createTileMapServiceImageryProvider"
  //         }
  //       }
  //     }
  //   ]
  // };

  earth.xbsjFromJSON({
    sceneTree: {
      root: {
        children: [
          {
            czmObject: {
              xbsjType: "Imagery",
              xbsjGuid: "5834b385-5c1c-4481-924e-e2dff536a085",
              name: "百度暗色风格",
              xbsjImageryProvider: {
                XbsjImageryProvider: {
                  url:
                    "http://api0.map.bdimg.com/customimage/tile?=&x={x}&y={y}&z={z}&scale=1&customid=midnight",
                  srcCoordType: "BD09"
                },
                UrlTemplateImageryProvider: {},
                WebMapTileServiceImageryProvider: {},
                createTileMapServiceImageryProvider: {}
              }
            }
          }
        ]
      }
    },
    cameraViewManager: {
      lastView: {
        position: [2.1020030927889835, 0.652374714558431, 354.4364293217608],
        rotation: [6.0863838239886965, -0.21908769479072254, 6.282536313340696],
        fov: 1.0471975511965976,
        near: 0.1,
        far: 10000000000
      }
    }
  });

  earth.sceneTree.root.children.push({
    czmObject: {
      xbsjType: "Tileset",
      xbsjGuid: "6fb0f26c-96a1-42f4-955c-94a886d6de99",
      name: "新建人工模型服务",
      url: "http://124.70.158.145:9999/ll/tileset.json",
      maximumScreenSpaceError: 256,
      luminanceAtZenith: 5,
      imageBasedLightingFactor: [0.46, 0.05],
      xbsjPosition: [2.1019486213865366, 0.6526365319647842, 55.6311614017294],
      xbsjRotation: [0.03477149649978628, 0, 0],
      xbsjScale: [0.03, 0.03, 0.03],
      xbsjUseOriginTransform: false,
      xbsjStyle: 'var style = {\n    color: "vec4(0, 0.5, 1.0,1)"\n}',
      xbsjClippingPlanes: {},
      xbsjCustomShader: {
        fsBody:
          "\n    float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;\n    float vtxf_a12 = v_elevationPos.z / 60.0 + sin(vtxf_a11) * 0.1;\n    gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0);\n\n    float vtxf_a13 = fract(czm_frameNumber / 360.0);\n    float vtxf_h = clamp(v_elevationPos.z / 300.0, 0.0, 1.0);\n    vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;\n    float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));\n    gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff);\n"
      }
    }
  });

  earth.sceneTree.root.children.push({
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "09efb369-3db7-4094-8b78-2c24a94bd716",
      name: "图片",
      position: [2.1019110289429737, 0.652554705175276, 15.891798810006861],
      imageUrl: "/popover.png",
      pinBuilder: {},
      far: 1073741824
    }
  });

  // var viewer = earth.cmz.viewer
  var viewer = earth.czm.viewer;

  var promise = Cesium.GeoJsonDataSource.load("zz.json"); //显示管线数据  直接加载json数据 比把json转化成czml在加载 快很多
  promise.then(function(dataSource) {
    console.log(dataSource);

    viewer.dataSources.add(dataSource);
    var entities = dataSource.entities.values;
    var colorHash = {};

    for (var o = 0; o < entities.length; o++) {
      var r = entities[o];
      r.nameID = o; //给每条线添加一个编号，方便之后对线修改样式
      r.polyline.width = 30; //添加默认样式
      (r.polyline.material = new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.8, //一个数字属性，指定发光强度，占总线宽的百分比。
        color: Cesium.Color.ORANGERED.withAlpha(0.5)
      })),
        10;
    }
    var temp = new Array();
    window.Hightlightline = function(nameid) {
      var exists = temp.indexOf(nameid);
      if (exists <= -1) {
        Highlight(nameid, 50, 50);
        temp.push(nameid); // 添加线nameID到数组，
      } //已经是高亮状态了 再次点击修改为原始状态
      else {
        Highlight(nameid, 10, 10);
        temp.splice(exists, 1); //删除对应的nameID
      }
    };
    window.Highlight = function(nameid, width1, width2) {
      for (var o = 0; o < entities.length; o++) {
        var m = entities[o];
        if (nameid == o) {
          m.polyline.width = width1;
          (m.polyline.material = new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.1, //一个数字属性，指定发光强度，占总线宽的百分比。
            color: Cesium.Color.ORANGERED.withAlpha(0.9)
          })),
            width2;
        }
      }
    };
  });

  comp._earth = earth;

  // 仅为调试方便用
  window.earth = earth;
}

function createCesium(comp) {
  window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
}

// 1 创建Earth的vue组件
var EarthComp = {
  data() {
    return {
      message: "页面加载于 " + new Date().toLocaleString(),
      _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
      _bgImagery: undefined
    };
  },
  // 1.1 资源创建
  mounted() {
    if (typeof XE !== "undefined") {
      createEarth(this);
    } else if (typeof Cesium !== "undefined") {
      createCesium(this);
    }
  },
  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  }
};

export default EarthComp;
</script>